<template>
  <el-row>
    <el-col :xl="12" :lg="15" class="cert-item">
      <div class="edit">
        <span @click="handleClose">取消</span>
        <span @click="handleUpdateInfo">保存</span>
      </div>
      <el-row class="marginT10">
        <el-col :span="20">
          <el-form ref="baseInfoForm" label-width="86px" :model="infoForm" :rules="infoRules">
            <!--            <el-form-item v-if="infoForm.loginName" label="登录名称" prop="loginName">-->
            <!--              <el-input v-model="infoForm.loginName" size="medium" disabled />-->
            <!--            </el-form-item>-->
            <el-form-item label="用户昵称" prop="userName">
              <el-input v-model="infoForm.userName" size="medium" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="infoForm.phonenumber" size="medium" />
            </el-form-item>
            <el-form-item label="邮箱地址" prop="email">
              <el-input v-model="infoForm.email" size="medium" />
            </el-form-item>
            <el-form-item label="用户性别" prop="sex">
              <el-radio v-model="infoForm.sex" label="0">男</el-radio>
              <el-radio v-model="infoForm.sex" label="1">女</el-radio>
            </el-form-item>
            <!-- <el-form-item>
          <el-button size="medium" @click="handleClose">关闭</el-button>
          <el-button size="medium" type="primary" @click="handleUpdateInfo">保存</el-button>
        </el-form-item> -->
          </el-form>
        </el-col>
      </el-row>
    </el-col>
    <el-col :push="1" :xl="11" :lg="9">
      <div class="img-wrap">
        <!-- <img class="erweima" :src="qqLogin" alt>
        <p>QQ扫码关联账号</p> -->
        <img class="erweima" :src="wxImg" alt>
        <vue-qr
          style="width: 100px;height:100px"
          :size="100"
          :margin="0"
          :auto-color="true"
          :dot-scale="1"
          :text="wxUrl"
        />
        <p>微信扫码关联账号</p>
        <!-- <wxlogin
          ref="wxlogin"
          appid="wx0ae11b6a28b4b9fc"
          scope="snsapi_login"
          :redirect_uri="wxUrl"
          href="data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=="
        /> -->
      </div>
    </el-col>
  </el-row>
</template>

<script>
import vueQr from 'vue-qr'
// import wxlogin from 'vue-wxlogin'
import qqLogin from '@/assets/qq_login.png'
import wxImg from '@/assets/wx_login.jpg'
import { updateUserInfo } from '@/api/system/profile'
import { mapState } from 'vuex'
export default {
  name: 'BaseInfo',
  components: {
    // wxlogin,
    vueQr
  },
  props: {
    wxUrl: {
      type: String,
      default: ''
    },
    loginFormData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      qqLogin,
      wxImg,
      // 基本资料表单绑定数据
      infoForm: {
        loginName: '',
        userName: '',
        phonenumber: '',
        email: '',
        sex: '0'
      },
      // 基本资料表单验证
      infoRules: {
        loginName: [
          { required: true, message: '登录名称不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        phonenumber: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: false,
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      loginType: state => state.user.loginType
    })
  },
  watch: {
    loginFormData: {
      deep: true,
      handler(val) {
        this.infoForm = { ...this.infoForm, ...val }
      }
    }
  },
  mounted() {

  },
  methods: {
    // 更改信息修改操作
    handleUpdateInfo() {
      this.$refs['baseInfoForm'].validate((val) => {
        if (val) {
          this.$confirm('您确定要修改用户信息吗？', '确认信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async() => {
              await updateUserInfo(this.infoForm)
              this.msgSuccess('修改用户信息成功！')
              if (this.loginType === '1') {
                this.$store.dispatch('user/getAccountInfo').then(() => {
                  this.$parent.$parent.$parent.$parent.$parent.$parent.getSysAccountData()
                })
              } else {
                this.$store.dispatch('user/getInfo').then(() => {
                  this.$parent.$parent.$parent.$parent.$parent.$parent.listCurrentUser()
                })
              }
            })
            .catch(() => {})
        }
      })
    },
    // 关闭按钮操作
    handleClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/index' })
    }
  }
}
</script>

<style lang='scss' scoped>
  @import '@/styles/variables.scss';
.img-wrap {
  width: 210px;
  /*text-align: center;*/
  font-size: 13px;
  .erweima {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
    vertical-align: top;
  }
}
.cert-item {
  border: 1px solid #e0d7d7;
  border-radius: 4px;
  padding: 15px 10px 10px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  .edit {
     width: 100%;
    height: 30px;
    border-bottom: 1px solid #ededed;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
    color: $blue;
    span {
      margin-left: 10px;
    }
  }
}
</style>
